<template>
    <Modal v-model="visible" width="650" @on-visible-change="visibleChange">
        <p slot="header">
            <Icon type="logo-buffer" :size="22"/>
            <span style="margin-left: 0.5em">{{title}}</span>
        </p>
        <Form ref="objectData" :disabled="!canEdit"  :model="objectData" :rules="ruleValidate" label-colon autocomplete="off"  :label-width="100">
            <Row>
                <Col span="12">
                    <FormItem label="部门名称"  prop="comName">
                        <Input v-model="objectData.comName"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="部门代码"  prop="comCode">
                        <Input v-model="objectData.comCode"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="所属部门"  prop="upperComCode">
                      <code-type-tag disabled v-model="objectData.upperComCode" is-tree code-type="organization" placeholder="请选择所属机构"/>
                    </FormItem>
                </Col>
              <Col span="12">
                <FormItem label="备案号"  prop="recordNumber">
                  <Input v-model="objectData.recordNumber" placeholder="请输入备案号"></Input>
                </FormItem>
              </Col>
            </Row>
            <Row>
                <Col span="12">
                    <FormItem label="证件类型"  prop="identityType">
                       <code-type-tag  v-model="objectData.identityType" code-type="BCredentialType" placeholder="请选择证件类型"/>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="证件号码"  prop="identityNo">
                        <Input v-model="objectData.identityNo" placeholder="请输入证件号码"></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>

            </Row>
            <Row>
                <FormItem label="状态"  prop="valid">
                    <i-switch v-model="objectData.valid" true-value=1 false-value=0 size="large">
                        <span slot="open">正常</span>
                        <span slot="close">关闭</span>
                    </i-switch>
                </FormItem>
            </Row>
        </Form>
        <div slot="footer" v-show="canEdit">
            <Button @click="cancel">取消</Button>
            <Button type="primary" @click="handleSubmit('objectData')">保存</Button>
        </div>
    </Modal>
</template>

<script>
    import {getById,saveOrUpdate} from "@/api/organizationApi"
    import TreeSelect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import {ruleValidate} from '@/views/group_management/organization/validator/OrganizationRules'
    import codeTypeTag from '@/components/codeType/code-type-tag'
    export default {
        name: "organization-detail",
        components:{
            TreeSelect,
            codeTypeTag
        },
        props:{
            organizationData:{
                type: Object,
                required: true
            },
            showModal: {
                type: Boolean,
                required: true
            },
            canEdit: {
                type: Boolean,
                required: true
            },
            reloadData: {
                type: Boolean,
                required: false,
                default: false
            },
            title: {
                type: String,
                required: true,
            }
        },
        data () {
            return {
                visible: this.showModal,
                objectData: Object.assign({}, this.organizationData),
                ruleValidate,
            }
        },
        mounted(){
            this.loadData()
        },
        watch: {
            showModal (val) {
                this.visible = val
            },
            visible (val) {
                if (val) {
                    if (this.reloadData&&(this.organizationData.comCode!==null&&this.organizationData.comCode!==undefined)){
                        getById(this.organizationData.comCode).then(res=>{
                            this.objectData = res
                        })
                    }else{
                        console.log(this.organizationData)
                        this.objectData = Object.assign({}, this.organizationData)
                    }
                }
            }
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let action = 'save';
                        if (this.objectData.id){
                          action= 'update'
                        }
                        saveOrUpdate(this.objectData,action).then(res=>{
                            this.$Message.success(res)
                            this.visible = false
                            this.$emit('callbackByOk')
                        })
                    }
                })
            },
            loadData(){

            },
            cancel () {
                this.visible = false
            },
            visibleChange(val){
                if (!val){
                    this.$emit('callbackByCancel')
                }
            }
        }
    }
</script>

<style scoped>

</style>
